<template>
  <div class="bottomContainer">
    <!-- 人口库 -->
    <el-table
      :data="tableData"
      :key="timeStamp"
      height="380"
      @cell-click="clickHandler()"
      v-show="tableShow"
    >
      <el-table-column prop="姓名" label="姓名" width="110" />
      <el-table-column prop="出生日期" label="出生日期" width="130" />
      <el-table-column prop="联系电话" label="联系电话" width="130" />
      <el-table-column
        prop="性别"
        label="性别"
        width="90"
        column-key="性别"
        :filters="filterList[0]"
        :filter-method="filterHandler"
      />
      <el-table-column prop="出生日期" label="出生日期" width="170" />
      <el-table-column
        prop="婚姻现状"
        label="婚姻现状"
        width="130"
        column-key="婚姻现状"
        :filters="filterList[1]"
      />
      <el-table-column
        prop="人口类型"
        label="人口类型"
        width="150"
        column-key="人口类型"
        :filters="filterList[2]"
      />
      <el-table-column
        prop="户籍省"
        label="户籍省"
        width="150"
        column-key="户籍省"
        :filters="filterList[3]"
      />
      <el-table-column prop="户籍详细地址" label="户籍详细地址" width="400" />
      <el-table-column
        prop="民族"
        label="民族"
        width="100"
        column-key="民族"
        :filters="filterList[4]"
      />
      <el-table-column
        prop="居住方式"
        label="居住方式"
        width="160"
        column-key="居住方式"
        :filters="filterList[5]"
      />
      <el-table-column
        prop="居住事由"
        label="居住事由"
        width="120"
        column-key="居住事由"
        :filters="filterList[6]"
      />
      <el-table-column
        prop="政治面貌"
        label="政治面貌"
        width="120"
        column-key="政治面貌"
        :filters="filterList[7]"
      />
      <el-table-column
        prop="文化程度"
        label="文化程度"
        width="170"
        column-key="文化程度"
        :filters="filterList[8]"
      />
      <el-table-column
        prop="特殊人群类型"
        label="特殊人群类型"
        column-key="特殊人群类型"
        width="200"
        :filters="filterList[9]"
      />
      <el-table-column prop="来本市日期" label="来本市日期" width="130" />
    </el-table>
  </div>
</template>

<script>
/*eslint-disable*/
import pubsub from "pubsub-js";
import { getCurrentInstance, onMounted } from "vue-demi";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

export default {
  name: "bottomContainer",
  data() {
    return {
      timeStamp: new Date().getTime(),
      filterList: [],
      tableData: [],
      peopleList: [],
      tableShow: true,
    };
  },
  setup() {
    const { proxy } = getCurrentInstance();
    const router = useRouter();
    const store = useStore();
    let subList = [];

    onMounted(() => {
      subList[0] = pubsub.subscribe("peopleDataInpt", (n, data) => {
        proxy.tableData = [];
        // 字段筛选值整合
        getFilter(data);
        proxy.timeStamp = new Date().getTime();
        proxy.tableData = data;
      });
      subList[1] = pubsub.subscribe("peopleInBuilding", (n, data) => {
        proxy.peopleList = [];
        proxy.peopleList = data;
      });
    });

    //字段筛选值整合
    function getFilter(peopleList) {
      proxy.filterList = [];
      // 待筛选字段列表
      let nameList = [
        "性别",
        "婚姻现状",
        "人口类型",
        "户籍省",
        "民族",
        "居住方式",
        "居住事由",
        "政治面貌",
        "文化程度",
        "特殊人群类型",
      ];
      for (let i = 0; i < nameList.length; i++) {
        let name = nameList[i];
        let key = peopleList[0][name];
        let list = [peopleList[0][name]];
        peopleList.forEach((people) => {
          if (people[name] != key) {
            // console.log("1." + people[name], list);
            let isNew = true;
            list.forEach((element) => {
              if (element === people[name]) {
                // console.log("3-1." + people[name], element);
                isNew = false;
              }
            });
            // console.log("3-2." + people[name], isNew);
            if (isNew) {
              list.push(people[name]);
              key = people[name];
            }
          }
        });
        // list = list.splice(1, list.length);
        proxy.filterList[i] = [];
        list.forEach((element) => {
          proxy.filterList[i].push({
            text: element,
            value: element,
          });
        });
      }
      // console.log(proxy.filterList);
    }

    // 代码触发筛选人口表
    function trigger() {
      console.log(proxy.timeStamp);
      setTimeout(() => {
        proxy.timeStamp = new Date().getTime();
        proxy.tableData = [];
        console.log(proxy.timeStamp);
      }, 500);
    }

    //前往人口
    function toPeople() {
      store.commit("clearDataP");
      router.push({
        path: "/peopleSelected",
      });
    }

    return { toPeople, subList };
  },
  methods: {
    filterHandler(value, row, column) {
      console.log(arguments);
      let prop = column["property"];
      return row[prop] === value;
    },
    clickHandler() {
      let name = Array.from(
        Array.from(event.target.parentNode.parentNode.children)[0].children
      )[0].innerHTML.split(">")[1];
      console.log(this.peopleList);
      this.peopleList.forEach((element) => {
        if (element.XM === name) {
          console.log(element);
          pubsub.publish("needCut", false);
          pubsub.publish("peopleSelected", element);
          this.toPeople();
        }
      });
    },
  },
  watch: {
    // tableData() {
    //   setTimeout(() => {
    //     Array.from(document.querySelectorAll("th>.cell")).forEach((e) => {
    //       e.style["color"] = "#1296db";
    //     });
    //     Array.from(document.querySelectorAll("tr")).forEach((e) => {
    //       e.style["color"] = "white";
    //       Array.from(document.querySelectorAll("td")).forEach((e) => {
    //         e.style["backgroundColor"] = "rgb(6,19,31)";
    //         e.style["border-bottom"] = "rgb(100,100,100) 1px solid";
    //       });
    //       Array.from(
    //         document.querySelectorAll(".el-table th.el-table__cell")
    //       ).forEach((e) => {
    //         e.style["backgroundColor"] = "rgb(6,19,31)";
    //         e.style["border-bottom"] = "rgb(100,100,100) 1px solid";
    //       });
    //     });
    //   }, 300);
    // },
  },
  beforeRouteEnter(to, from) {
    // console.log(to, from);
    // 来源区分
    if (from.fullPath === "/main") {
    }
  },
  beforeDestroy() {
    this.subList.forEach((element) => {
      pubsub.unsubscribe(element);
    });
  },
  beforeRouteLeave() {
    this.subList.forEach((element) => {
      pubsub.unsubscribe(element);
    });
  },
};
</script>

<style lang="less" scoped>
.bottomContainer {
  height: 34%;
  width: 100%;
  background-image: linear-gradient(
    to top,
    rgba(6, 19, 31, 1),
    rgba(6, 19, 31, 0.3) 95%,
    rgba(6, 19, 31, 0)
  );
  position: absolute;
  bottom: 0%;
  z-index: 1000;
  overflow: hidden;
}
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: transparent !important;
}
/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent !important;
}
</style>